import React from 'react'

// 事件绑定： on+事件名称，事件驼峰式命名

// 函数组件的创建和渲染
function Hello() {
    // const clickHandler = () => {
    //     console.log('函数式组件中的事件')
    // }
    // const clickJump = (e) => {
    //     e.preventDefault();   // 阻止默认行为
    //     console.log('函数式组件中默认事件', e)
    // }
    // const clickParam = (msg) => {                // 事件传参， 下面调用需要使用箭头函数的方法
    //     console.log('函数式组件中事件传参', msg)
    // }
    const clickDefaultParam = (e, msg) => {
        console.log(e, msg)
    }
    // return <div onClick={clickHandler}>hello</div>
    // return <div>hello <a onClick={clickJump} href="https://baidu.com">百度</a></div>
    // return <div>hello <span onClick={() => clickParam('this is msg')}>事件传参</span></div>
    return <div>hello <span onClick={(e) => clickDefaultParam(e, 'this is msg')}>默认参数事件传参</span></div>
}

// 类组件
class HelloComponent extends React.Component {
    // 事件回调函数（标准写法： 避免this指向问题）
    clickHandler = () => {
        console.log('函数式组件中的事件')
    }
    render() {                                    
        return <div onClick={this.clickHandler}>hello class component</div>
    }
}



export default function Test2_component() {
  return (
    <>
        {/* 渲染函数式组件 */}
        <Hello />
        {/* 渲染类组件 */}
        <HelloComponent />
    </>
  )
}
